<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;"> 
		<title>Toki Learning</title> 
		<meta name="description" content=""> 
		<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection"> 
		<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
		<link rel="stylesheet" type="text/css" href="css/contest.css" media="screen">	
		<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.13.custom.css" media="screen">
		<link rel="stylesheet" type="text/css" href="css/jquery.css" media="screen">
		<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
		<script src="js/jquery-1.8.13.costum.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/core.js"></script>
		<script type="text/javascript" src="js/widget.js"></script>
		<script type="text/javascript" src="js/mouse.js"></script>
		<script type="text/javascript" src="js/selectable.js"></script>
		<script type="text/javascript">
			var id = [];
			var x;
			for (x=1;x<11;x++)
			{
				id[x-1]=x;
			}
			var user = ["Anna Malik","David Kurniawan","Anna Malik","David Kurniawan","Anna Malik","David Kurniawan","Anna Malik","David Kurniawan","Anna Malik","David Kurniawan"];
			var Total = [7658,7358,7658,7358,7658,7358,7658,7358,7658,7358];
			var PA = [657,657,657,657,657,657,657,657,657,657];
			var PB = [768,768,768,768,768,768,768,768,768,768];
			var PC = [304,304,304,304,304,304,304,304,304,304];
			var PD = [4574,4574,4574,4574,4574,4574,4574,4574,4574,4574];
		</script>
	</head>
<body>
	<div id="container">
		<div id="header">
			<div id="logo">
				<div id="usermenu" class="left">
					<div id="usernav">
							<ul>
								<li><b><a href="#">Setting</a></b></li>
							</ul>
							<div class="vertikal line2 left"></div>
							<div class="vertikal line1 left"></div>
							<ul>
								<li><b><a href="#">Inbox(0)</a></b></li>
							</ul>
							<div class="vertikal line2 left"></div>
							<div class="vertikal line1 left"></div>
							<ul>
								<li><b><a href="#">Logout</a></b></li>
							</ul>
					</div>
				</div>
			</div>
			<div id="menucontainer">
				<div id="pemisah">
				</div>
				<div id="mainmenu">
					<div id="menu" class="span-10">
						<div id="nav">
							<ul>
								<li><b><a href="#" class="navbar"> Problem Archives </a></b></li>
								<li><b><a href="#" class="navbar"> Contests </a></b></li>
								<li>
									<b><a href="#" class="navbar"> Training Gate </a></b>
									<ul>
										<li><b><a href="#" class="navbar">Chapter 1</a></b></li>
										<li><b><a href="#" class="navbar">Chapter 2</a></b></li>
										<li><b><a href="#" class="navbar">Chapter 3</a></b></li>
										<li><b><a href="#" class="navbar">Chapter 4</a></b></li>
										<li><b><a href="#" class="navbar">Chapter 5</a></b></li>
										<li><b><a href="#" class="navbar">Chapter 6</a></b></li>
										<li><b><a href="#" class="navbar">Chapter 7</a></b></li>
										<li><b><a href="#" class="navbar">Chapter 8</a></b></li>
									</ul>
								</li>
								<li><b><a href="#" class="navbar"> Learn </a></b></li>
							</ul>
						</div>
						<div class="horisontal line1"></div>
						<div class="horisontal line2"></div>
						<div id="nav2" class="right">
							<ul>
								<li><a href="#">My Friends</a></li>
								<li><a href="#">My Statistics</a></li>
								<li><a href="#">My Submissions</a></li>
								<li><a href="#">My Contests</a></li>
								<li><a href="#">My Profile</a></li>
							</ul>
						</div>
					</div>
					<div id="profile" class="left">
						<div class="vertikal line1 left"></div>
						<div class="vertikal line2 left"></div>
						<div id="nama" class="left">
							<b><a href="#">Petra Noviandi Barus</a></b>
						</div>
						<div id="profpic" class="left">
							<a href="#"><img src="image/user.jpg" alt="userpict"></a>
						</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<div id="content" >
			<div id="isicontent">
				<div id="maincontent" class="left">	
					<div id="tabel" class="left">
						<h2>JAVA PROGRAMMING CONTEST</h2>
						<div id="option" class="left">
							<ul class="option left">
								<li class="option left"> <a class="option" href="#announcements"> Announcements </a></li>
								<li class="option left"> <a class="option" href="#problem"> Problems </a></li>
								<li class="option left"> <a class="option" href="#submission"> Submissions </a></li>
								<li class="option left"> <a class="option" href="#clarification"> Clarification </a></li>
								<li class="option left"> <a class="option" href="#rank"> Status/Ranklist </a></li>
							</ul>
						</div>
						<h3>Ranklist</h3>
						<table id="scoreboard">
						<tr id="head">
							<th class="rank"><a href="#" id="Rank" class="putih">Rank</a></th>
							<th class="user"><a href="#" id="User" class="putih">User</a></th>
							<th><a href="#" id="Total" class="putih">Total</a></th>
							<th><a href="#" id="PA" class="putih">PA</a></th>
							<th><a href="#" id="PB" class="putih">PB</a></th>
							<th><a href="#" id="PC" class="putih">PC</a></th>
							<th><a href="#" id="PD" class="putih">PD</a></th>
						</tr>
						
						<tr id="row1" class="alt ">
							<td class="rank">1</td>
							<td class="user">Anna Malik</td>
							<td>7658</td>
							<td>657</td>
							<td>768</td>
							<td>304</td>
							<td>4574</td>
						</tr>
						<tr id="row2">
							<td class="rank">2</td>
							<td class="user">David Kurniawan</td>
							<td>7358</td>
							<td>657</td>
							<td>768</td>
							<td>304</td>
							<td>4574</td>
						</tr>
						<tr id="row3" class="alt">
							<td class="rank">3</td>
							<td class="user">Anna Malik</td>
							<td>7658</td>
							<td>657</td>
							<td>768</td>
							<td>304</td>
							<td>4574</td>
						</tr>
						<tr id="row4">
							<td class="rank">4</td>
							<td class="user">David Kurniawan</td>
							<td>7358</td>
							<td>657</td>
							<td>768</td>
							<td>304</td>
							<td>4574</td>
						</tr>
						<tr id="row5" class="alt">
							<td class="rank">5</td>
							<td class="user">Anna Malik</td>
							<td>7658</td>
							<td>657</td>
							<td>768</td>
							<td>304</td>
							<td>4574</td>
						</tr>
						<tr id="row6">
							<td class="rank">6</td>
							<td class="user">David Kurniawan</td>
							<td>7358</td>
							<td>657</td>
							<td>768</td>
							<td>304</td>
							<td>4574</td>
						</tr>
						<tr id="row7" class="alt">
							<td class="rank">7</td>
							<td class="user">Anna Malik</td>
							<td>7658</td>
							<td>657</td>
							<td>768</td>
							<td>304</td>
							<td>4574</td>
						</tr>
						<tr id="row8">
							<td class="rank">8</td>
							<td class="user">David Kurniawan</td>
							<td>7358</td>
							<td>657</td>
							<td>768</td>
							<td>304</td>
							<td>4574</td>
						</tr>
						<tr id="row9" class="alt">
							<td class="rank">9</td>
							<td class="user">Anna Malik</td>
							<td>7658</td>
							<td>657</td>
							<td>768</td>
							<td>304</td>
							<td>4574</td>
						</tr>
						<tr id="row10">
							<td class="rank">10</td>
							<td class="user">David Kurniawan</td>
							<td>7358</td>
							<td>657</td>
							<td>768</td>
							<td>304</td>
							<td>4574</td>
						</tr>
					</table>
                                        <script  type="text/javascript">
							$("#Rank").click(function () {
								$('#Rank').addClass('mark');
								$('#User').removeClass('mark');
								$('#Total').removeClass('mark');
								$('#PA').removeClass('mark');
								$('#PB').removeClass('mark');
								$('#PC').removeClass('mark');
								$('#PD').removeClass('mark');
								var x,y;
								for (x=0;x<10;x++)
								{
									for (y=x+1;y<11;y++)
									{
										if (id[x]>id[y])
										{
											var temp;
											temp=id[x];
											id[x]=id[y];
											id[y]=temp;
											
											temp=user[x];
											user[x]=user[y];
											user[y]=temp;
											
											temp=Total[x];
											Total[x]=Total[y];
											Total[y]=temp;
											
											temp=PA[x];
											PA[x]=PA[y];
											PA[y]=temp;
											
											temp=PB[x];
											PB[x]=PB[y];
											PB[y]=temp;
											
											temp=PC[x];
											PC[x]=PC[y];
											PC[y]=temp;
											
											temp=PD[x];
											PD[x]=PD[y];
											PD[y]=temp;
										}
									}
								}
								for (x=1;x<11;x++)
								{
									var str= '<td class="rank">'+id[x-1]+'</td><td class="user">'+user[x-1]+'</td><td>'+Total[x-1]+'</td><td>'+PA[x-1]+'</td><td>'+PB[x-1]+'</td><td>'+PC[x-1]+'</td><td>'+PD[x-1]+'</td>';
									var s1="#row"+x;
									$(s1).empty();
									$(s1).append(str);
								}
							})
							$("#User").click(function () {
								$('#Rank').removeClass('mark');
								$('#User').addClass('mark');
								$('#Total').removeClass('mark');
								$('#PA').removeClass('mark');
								$('#PB').removeClass('mark');
								$('#PC').removeClass('mark');
								$('#PD').removeClass('mark');
								var x,y;
								for (x=0;x<10;x++)
								{
									for (y=x+1;y<11;y++)
									{
										if (user[x]>user[y])
										{
											var temp;
											temp=id[x];
											id[x]=id[y];
											id[y]=temp;
											
											temp=user[x];
											user[x]=user[y];
											user[y]=temp;
											
											temp=Total[x];
											Total[x]=Total[y];
											Total[y]=temp;
											
											temp=PA[x];
											PA[x]=PA[y];
											PA[y]=temp;
											
											temp=PB[x];
											PB[x]=PB[y];
											PB[y]=temp;
											
											temp=PC[x];
											PC[x]=PC[y];
											PC[y]=temp;
											
											temp=PD[x];
											PD[x]=PD[y];
											PD[y]=temp;
										}
									}
								}
								for (x=1;x<11;x++)
								{
									var str= '<td class="rank">'+id[x-1]+'</td><td class="user">'+user[x-1]+'</td><td>'+Total[x-1]+'</td><td>'+PA[x-1]+'</td><td>'+PB[x-1]+'</td><td>'+PC[x-1]+'</td><td>'+PD[x-1]+'</td>';
									var s1="#row"+x;
									$(s1).empty();
									$(s1).append(str);
								}
							});
							$("#Total").click(function () {
								$('#Rank').removeClass('mark');
								$('#User').removeClass('mark');
								$('#Total').addClass('mark');
								$('#PA').removeClass('mark');
								$('#PB').removeClass('mark');
								$('#PC').removeClass('mark');
								$('#PD').removeClass('mark');
								var x,y;
								for (x=0;x<10;x++)
								{
									for (y=x+1;y<11;y++)
									{
										if (Total[x]<Total[y])
										{
											var temp;
											temp=id[x];
											id[x]=id[y];
											id[y]=temp;
											
											temp=user[x];
											user[x]=user[y];
											user[y]=temp;
											
											temp=Total[x];
											Total[x]=Total[y];
											Total[y]=temp;
											
											temp=PA[x];
											PA[x]=PA[y];
											PA[y]=temp;
											
											temp=PB[x];
											PB[x]=PB[y];
											PB[y]=temp;
											
											temp=PC[x];
											PC[x]=PC[y];
											PC[y]=temp;
											
											temp=PD[x];
											PD[x]=PD[y];
											PD[y]=temp;
										}
									}
								}
								for (x=1;x<11;x++)
								{
									var str= '<td class="rank">'+id[x-1]+'</td><td class="user">'+user[x-1]+'</td><td>'+Total[x-1]+'</td><td>'+PA[x-1]+'</td><td>'+PB[x-1]+'</td><td>'+PC[x-1]+'</td><td>'+PD[x-1]+'</td>';
									var s1="#row"+x;
									$(s1).empty();
									$(s1).append(str);
								}
							});
							$("#PA").click(function () {
								$('#Rank').removeClass('mark');
								$('#User').removeClass('mark');
								$('#Total').removeClass('mark');
								$('#PA').addClass('mark');
								$('#PB').removeClass('mark');
								$('#PC').removeClass('mark');
								$('#PD').removeClass('mark');
								var x,y;
								for (x=0;x<10;x++)
								{
									for (y=x+1;y<11;y++)
									{
										if (PA[x]<PA[y])
										{
											var temp;
											temp=id[x];
											id[x]=id[y];
											id[y]=temp;
											
											temp=user[x];
											user[x]=user[y];
											user[y]=temp;
											
											temp=Total[x];
											Total[x]=Total[y];
											Total[y]=temp;
											
											temp=PA[x];
											PA[x]=PA[y];
											PA[y]=temp;
											
											temp=PB[x];
											PB[x]=PB[y];
											PB[y]=temp;
											
											temp=PC[x];
											PC[x]=PC[y];
											PC[y]=temp;
											
											temp=PD[x];
											PD[x]=PD[y];
											PD[y]=temp;
										}
									}
								}
								for (x=1;x<11;x++)
								{
									var str= '<td class="rank">'+id[x-1]+'</td><td class="user">'+user[x-1]+'</td><td>'+Total[x-1]+'</td><td>'+PA[x-1]+'</td><td>'+PB[x-1]+'</td><td>'+PC[x-1]+'</td><td>'+PD[x-1]+'</td>';
									var s1="#row"+x;
									$(s1).empty();
									$(s1).append(str);
								}
							});
							$("#PB").click(function () {
								$('#Rank').removeClass('mark');
								$('#User').removeClass('mark');
								$('#Total').removeClass('mark');
								$('#PA').removeClass('mark');
								$('#PB').addClass('mark');
								$('#PC').removeClass('mark');
								$('#PD').removeClass('mark');
								var x,y;
								for (x=0;x<10;x++)
								{
									for (y=x+1;y<11;y++)
									{
										if (PB[x]<PB[y])
										{
											var temp;
											temp=id[x];
											id[x]=id[y];
											id[y]=temp;
											
											temp=user[x];
											user[x]=user[y];
											user[y]=temp;
											
											temp=Total[x];
											Total[x]=Total[y];
											Total[y]=temp;
											
											temp=PA[x];
											PA[x]=PA[y];
											PA[y]=temp;
											
											temp=PB[x];
											PB[x]=PB[y];
											PB[y]=temp;
											
											temp=PC[x];
											PC[x]=PC[y];
											PC[y]=temp;
											
											temp=PD[x];
											PD[x]=PD[y];
											PD[y]=temp;
										}
									}
								}
								for (x=1;x<11;x++)
								{
									var str= '<td class="rank">'+id[x-1]+'</td><td class="user">'+user[x-1]+'</td><td>'+Total[x-1]+'</td><td>'+PA[x-1]+'</td><td>'+PB[x-1]+'</td><td>'+PC[x-1]+'</td><td>'+PD[x-1]+'</td>';
									var s1="#row"+x;
									$(s1).empty();
									$(s1).append(str);
								}
							});
							$("#PC").click(function () {
								$('#Rank').removeClass('mark');
								$('#User').removeClass('mark');
								$('#Total').removeClass('mark');
								$('#PA').removeClass('mark');
								$('#PB').removeClass('mark');
								$('#PC').addClass('mark');
								$('#PD').removeClass('mark');
								var x,y;
								for (x=0;x<10;x++)
								{
									for (y=x+1;y<11;y++)
									{
										if (PC[x]<PC[y])
										{
											var temp;
											temp=id[x];
											id[x]=id[y];
											id[y]=temp;
											
											temp=user[x];
											user[x]=user[y];
											user[y]=temp;
											
											temp=Total[x];
											Total[x]=Total[y];
											Total[y]=temp;
											
											temp=PA[x];
											PA[x]=PA[y];
											PA[y]=temp;
											
											temp=PB[x];
											PB[x]=PB[y];
											PB[y]=temp;
											
											temp=PC[x];
											PC[x]=PC[y];
											PC[y]=temp;
											
											temp=PD[x];
											PD[x]=PD[y];
											PD[y]=temp;
										}
									}
								}
								for (x=1;x<11;x++)
								{
									var str= '<td class="rank">'+id[x-1]+'</td><td class="user">'+user[x-1]+'</td><td>'+Total[x-1]+'</td><td>'+PA[x-1]+'</td><td>'+PB[x-1]+'</td><td>'+PC[x-1]+'</td><td>'+PD[x-1]+'</td>';
									var s1="#row"+x;
									$(s1).empty();
									$(s1).append(str);
								}
							});
							$("#PD").click(function () {
								$('#Rank').removeClass('mark');
								$('#User').removeClass('mark');
								$('#Total').removeClass('mark');
								$('#PA').removeClass('mark');
								$('#PB').removeClass('mark');
								$('#PC').removeClass('mark');
								$('#PD').addClass('mark');
								var x,y;
								for (x=0;x<10;x++)
								{
									for (y=x+1;y<11;y++)
									{
										if (PD[x]<PD[y])
										{
											var temp;
											temp=id[x];
											id[x]=id[y];
											id[y]=temp;
											
											temp=user[x];
											user[x]=user[y];
											user[y]=temp;
											
											temp=Total[x];
											Total[x]=Total[y];
											Total[y]=temp;
											
											temp=PA[x];
											PA[x]=PA[y];
											PA[y]=temp;
											
											temp=PB[x];
											PB[x]=PB[y];
											PB[y]=temp;
											
											temp=PC[x];
											PC[x]=PC[y];
											PC[y]=temp;
											
											temp=PD[x];
											PD[x]=PD[y];
											PD[y]=temp;
										}
									}
								}
								for (x=1;x<11;x++)
								{
									var str= '<td class="rank">'+id[x-1]+'</td><td class="user">'+user[x-1]+'</td><td>'+Total[x-1]+'</td><td>'+PA[x-1]+'</td><td>'+PB[x-1]+'</td><td>'+PC[x-1]+'</td><td>'+PD[x-1]+'</td>';
									var s1="#row"+x;
									$(s1).empty();
									$(s1).append(str);
								}
							});
						</script>
					</div>
					<div class="vertikal line3 left"></div>
					<div id="sidebar" class="left">
						<div id="atas">
							<h4>Latest Announcement</h4>
							<p class="announcement"> <i>posted 10 minutes ago </i></p>
						</div>
						<div class="horisontal line4"></div>
						<div id="bawah">
							<h5>Problems</h5>
							<ol class="problems">
								<li>1.Jumlah Bilangan</li>
								<li>2.Perubahan Minimal</li>
								<li>3.Matrix</li>
								<li>4.Soal lainnya</li>
								<li>5.Berfoto</li>
							</ol>
							
							<h5>Clarifications</h5>
							<a href="#clarifications" class="more"><b>Questions Subject</b> on <b>Problem Name</b></a>
								<p><i>posted 10 minutes ago</i></p>	
							<a href="#clarifications" class="more"><b>Questions Subject</b> on <b>Problem Name</b></a>
								<p><i>posted 10 minutes ago</i></p>	
							<a href="#clarifications" class="more"><b>Questions Subject</b> on <b>Problem Name</b></a>
								<p><i>posted 10 minutes ago</i></p>
							
							<a href="#see" class="more right">See All</a>
							<a href="#question" class="more aline right">Post a Question</a>
							
							<div id="submission">
								<h5>Submissions</h5>
								<ul class="submissions">
									<li>Problem Name <a href="#result" class="right"> (result) </a></li>
									<li>Bilangan <a href="#result" class="right"> (result) </a></li>
									<li>Perubahan Minimal <a href="#result" class="right"> (result) </a></li>
									<li>Matrix <a href="#result" class="right"> (result) </a></li>
									<li>Maling Motor <a href="#result" class="right"> (result) </a></li>
									<li>Foto Bersama <a href="#result" class="right"> (result) </a></li>
                                                                </ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<div id="leftside">
				<div id="biasa">
					<a href="">Our Blog</a> |
					<a href="">About Us</a> |
					<a href="">Contact Us</a> |
				</div>
				<div id="follow">
					Follow our <a href="http://www.facebook.com/groups/166544345960/" onclick="window.open(this.href,'_blank;');return false;"><b>Facebook</b></a> and <a href="http://twitter.com/#/tokilearning" onclick="window.open(this.href,'_blank');return false;"><b>Twitter</b></a>
				</div>
			</div>
			<div id="copyright">
				Copyright of TOKI Learning 2011
			</div>
		</div>
	</div>
</body>
</html>
